Vee-Validate — Required Fields and Built-in Rules

Form validation is a feature that’s not built into Vue.js.

However, we still need this feature very much.

In this article, we’ll look at how to define required fields and use built-in validation rules.

Required Fields

A field is required if we must have it present.

Values that are empty or falsy can’t be accepted.

Therefore, undefined , null , empty strings and empty arrays can’t be accepted.

0 is accepted as a valid value for the required fields.

false is also accepted by Vee-Validate as a valid value.

Optional Fields

Optional fields are validated when they’re empty.

Create a Required Rule

We can create a required rule with the computesRequired property.

We set it to true for it to be required.

For instance, we can write:

extend('required', {
  validate () {
    // ...
  },
  computesRequired: true
});

In the validate method, we have to return an object with the required and valid properties.

For example, we can write:

extend('required', {
  validate (value) {
    return {
      required: true,
      valid: !['', null, undefined].includes(value)
    };
  },
  computesRequired: true
});

Built-in Rules

Vee-Validate comes with come validation rules.

However, they aren’t installed by default.

To use them, we have to import them:

import { extend } from 'vee-validate';
import { required, email } from 'vee-validate/dist/rules';

extend('email', email);
extend('required', {
  ...required,
  message: 'please fill in'
});

We have the message property which overrides the existing one.

Install All Rules

We can install all rules by importing everything from the vee-validate/dist/rules module.

For example, we can write:

import { extend } from 'vee-validate';
import * as rules from 'vee-validate/dist/rules';

Object.keys(rules).forEach(rule => {
  extend(rule, rules[rule]);
});

The rules are in the rules object properties, so we just loop through them and call extend on them to import them.

Rules

There are many rules available. The following can be imported and use:

• alpha — alphabetic characters
• alpha_dash — alphabetic characters with dashes or underscores
• alpha_num — alphanumeric characters
• alpha_spaces — alphabets and spaces
• between — minimum and maximum values
• confirmed — check that 2 fields are the same
• digits — a specified number of digits
• dimensions — dimensions of images
• email — emails
• excluded — check if something isn’t in the list
• ext — checks file extensions
• image — image mime type
• integer — integers
• is — match the given value
• is_not — doesn’t match the given value
• length — length of the value
• max — check if something doesn’t exceed the maximum length
• max_value — check if something doesn’t exceed the maximum value
• mimes — check if something has one of the listed mime types
• min — less than the specified length
• min_value — check if something isn’t less than the given value
• numeric — numeric characters
• oneOf — check if the inputted value is one of the listed ones
• regex — check if a value matches a given regex
• required — check if something is entered
• required_if — required if something is entered in another field
• size — check if a file doesn’t exceed a given size in kilobytes

Some of them take arguments.

digits can be used as follows:

<ValidationProvider rules="digits:10" v-slot="{ errors }">
  <input v-model="value" type="text">
  <span>{{ errors[0] }}</span>
</ValidationProvider>

where 10 is the number of digits allowed

dimensions checks the dimensions of the image file selected:

<ValidationProvider rules="dimensions:220,230" v-slot="{ errors, validate }">
  <input type="file" @change="validate">
  <span>{{ errors[0] }}</span>
</ValidationProvider>

220 is the width and 230 is the height.

excluded checks if something isn’t in the list:

<ValidationProvider rules="excluded:1,2" name="number" v-slot="{ errors }">
  <select v-model="value">
    <option value="1">one</option>
    <option value="2">two</option>
    <option value="3">three</option>
  </select>
  <span>{{ errors[0] }}</span>
</ValidationProvider>

1 and 2 are arguments of excluded , so they’re invalid.

ext checks if a selected file has the given extension specified:

<ValidationProvider rules="ext:jpg,png" v-slot="{ errors, validate }">
  <input type="file" @change="validate">
  <span>{{ errors[0] }}</span>
</ValidationProvider>

So jpg and png are valid file extensions.

is_not takes an argument to exclude.

For example, we can write:

<ValidationProvider rules="is_not:foo" v-slot="{ errors }">
  <input type="text" v-model="value">
  <span>{{ errors[0] }}</span>
</ValidationProvider>

foo is the value that’s not valid when entered.

length means that the string must be a string or array value that must have the given length.

Therefore, if we have:

<ValidationProvider rules="length:5" v-slot="{ errors }">
  <input type="text" v-model="value">
  <span>{{ errors[0] }}</span>
</ValidationProvider>

Then the inputted value must have length 5.

Conclusion

There are many built-in rules we can use for validation.

Inputted values including files can be validated.

We can also define the required fields.